.VipPrivilege_wrap {
  &.vip {
    &.level_0 {
      background: url('../../images/vip/level_0.png') no-repeat;
      background-size: contain;
    }
    &.level_1 {
      background: url('../../images/vip/level_1.png') no-repeat;
      background-size: contain;
    }
    &.level_2 {
      background: url('../../images/vip/level_2.png') no-repeat;
      background-size: contain;
    }
    &.level_3 {
      background: url('../../images/vip/level_3.png') no-repeat;
      background-size: contain;
    }
    &.level_4 {
      background: url('../../images/vip/level_4.png') no-repeat;
      background-size: contain;
    }
    &.level_5 {
      background: url('../../images/vip/level_5.png') no-repeat;
      background-size: contain;
    }
  }
  .VipPrivilege_content {
    margin: 16px auto;
    width: 343px;
    color: #fff;
    .vip_card {
      width: 343px;
      height: 156px;
      // background: url('../../images/vip_level1.png') no-repeat;
      // background-size: contain;
      box-sizing: border-box;
      // padding: 24px 16px;
      padding-top: 40px;
      .userinfo {
        display: flex;
        // align-items: center;
        .avatar {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .username {
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          font-weight: 500;
          margin-left: 6px;
        }
      }

      .progress {
        width: 170px;
        // margin-left: 6px;
        margin: 10px 0 0 6px;
        .progress_data {
          height: 24px;
          // align-items: center;
          // display: flex;
          // justify-content: space-between;
          span {
            transform: scale(0.86);
            color: rgba(#fff, 0.8);
          }
        }
      }

      .un_vip {
        color: #fff;
        opacity: 0.6;
        margin-top: 28px;
        text-align: center;
        span {
          color: #affba1;
          opacity: 1;
          font-weight: 500;
        }
      }
    }

    .vip_privilege {
      margin: 24px 0 0 0;
      .privilege_tit {
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        height: 24px;
        margin-bottom: 8px;
      }
      .privileges {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        .privilege_item {
          box-sizing: border-box;
          width: 78px;
          height: 98px;
          color: #fff;
          text-align: center;
          margin-bottom: 12px;
          border-radius: 12px;
          .privilege_item_icon {
            width: 34px;
            height: 34px;
            margin: 8px auto 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .privilege_item_t {
            font-size: 12px;
            font-weight: 500;
            margin: 2px 0;
          }
          .privilege_item_text {
            font-size: 12px;
            transform: scale(0.84);
            font-weight: 400;
            color: rgba(255, 255, 255, 0.56);
            line-height: 16px;
          }
          &.a {
            // background: url("../../images/privilege_bg1.png") no-repeat;
            background: rgba(#ff7c7c, 0.2);
            background-size: contain;
            .privilege_item_icon {
              background: url('../../images/privilege_icon1.png') no-repeat;
              background-size: contain;
            }
          }
          &.b {
            // background: url("../../images/privilege_bg2.png") no-repeat;
            background: rgba(#ffde8a, 0.2);
            background-size: contain;
            .privilege_item_icon {
              background: url('../../images/privilege_icon2.png') no-repeat;
              background-size: contain;
            }
          }
          &.c {
            background: rgba(#96ff7b, 0.2);
            .privilege_item_icon {
              background: url('../../images/privilege_icon3.png') no-repeat;
              background-size: contain;
            }
          }
          &.d {
            // background: url("../../images/privilege_bg4.png") no-repeat;
            background: rgba(#908dff, 0.2);
            background-size: contain;
            // .privilege_item_icon {
            //     background: url('../../images/privilege_icon4.png') no-repeat;
            //     background-size: contain;
            // }
          }
        }
      }
    }
  }
}
